<template>
  <!-- 律师费 -->
  <view class="calculator">
    <view class="display">
      <!-- table0 动态表格 -->
      <view class="table" v-if="state.isShowTable && state.table0">
        <view class="tr">
          <text class="td">类型</text>
          <text class="td">收费</text>
        </view>
        <view class="tr">
          <view class="td">民事、仲裁</view>
          <view class="td">{{ state.contextList[0] }}</view>
        </view>
        <view class="tr">
          <view class="td">行政</view>
          <view class="td">{{ state.contextList[1] }}</view>
        </view>
      </view>
      <!-- table1 动态表格 -->
      <view class="table" v-if="state.isShowTable && state.table1">
        <view class="tr">
          <text class="td">阶段</text>
          <text class="td">收费</text>
        </view>
        <view class="tr" v-for="(item, index) in state.dynamicContextList" :key="index">
          <view class="td">{{ item[0] }}</view>
          <view class="td">{{ item[1] }}</view>
        </view>
      </view>
      <!-- table2 -->
      <view class="fixed-table" style="font-size: 20rpx" v-if="state.isShowTable && state.table2">
        <view class="left" style="width: 60%">
          <view class="td">类型</view>
          <view class="td">不涉及财产</view>
          <view class="flex">
            <view class="left" style="display: flex; align-items: center; justify-content: center">涉及财产</view>
            <view class="flex1">
              <view class="td">要求出具法律意见书</view>
              <view class="td">尽职调查、咨询建议书、律师见证</view>
            </view>
          </view>
        </view>
        <view class="right" style="width: 40%">
          <view class="context-item">收费</view>
          <view class="context-item" v-for="(item, index) in state.contextList" :key="index">{{ item }}</view>
        </view>
      </view>
      <!-- table3 -->
      <view class="fixed-table" style="font-size: 22rpx" v-if="state.isShowTable && state.table3">
        <view class="left">
          <view class="td">阶段</view>
          <view class="td">侦查阶段</view>
          <view class="td">审查起诉阶段</view>
          <view class="flex">
            <view class="left" style="display: flex; align-items: center; justify-content: center">审判阶段</view>
            <view class="">
              <view class="td">担任被告人的辩护人</view>
              <view class="td">担任自诉人、被害人的诉讼代理人</view>
            </view>
          </view>
        </view>
        <view class="right">
          <view class="context-item">收费</view>
          <view class="context-item" v-for="(item, index) in state.contextList" :key="index">{{ item }}</view>
        </view>
      </view>
      <!-- table4 -->
      <view class="fixed-table" style="font-size: 20rpx" v-if="state.isShowTable && state.table4">
        <view class="left">
          <view class="td">阶段</view>
          <view class="flex">
            <view class="left" style="display: flex; align-items: center; justify-content: center">5.1固定收费</view>
            <view class="">
              <view class="td">担任机关、事业单位常年法律顾问</view>
              <view class="td">担任大型企业常年法律顾问</view>
              <view class="td">担任中型企业常年法律顾问</view>
              <view class="td">担任小（微）型企业常年法律顾问</view>
            </view>
          </view>
          <view class="td" style="border-top: 2rpx solid #fff">5.2计时收费</view>
        </view>
        <view class="right">
          <view class="context-item">收费</view>
          <view class="context-item" v-for="(item, index) in state.contextList" :key="index">{{ item }}</view>
        </view>
      </view>
      <!-- table5 -->
      <view class="fixed-table" style="font-size: 20rpx" v-if="state.isShowTable && state.table5">
        <view class="left">
          <view class="td">阶段</view>
          <view class="td">侦查阶段</view>
          <view class="td">审查起诉阶段</view>
          <view class="flex">
            <view class="left" style="display: flex; align-items: center; justify-content: center">审判阶段</view>
            <view class="">
              <view class="td">基层法院一审</view>
              <view class="td">中级及以上法院一审</view>
            </view>
          </view>
          <view class="flex" style="border-top: 2rpx solid #fff">
            <view class="left" style="display: flex; align-items: center; justify-content: center">申诉阶段</view>
            <view class="">
              <view class="td">基层法院再审</view>
              <view class="td">中级及以上法院再审</view>
            </view>
          </view>
        </view>
        <view class="right">
          <view class="context-item">收费</view>
          <view class="context-item" v-for="(item, index) in state.contextList" :key="index">{{ item }}</view>
        </view>
      </view>
      <!-- table6 -->
      <view class="fixed-table" style="font-size: 20rpx" v-if="state.isShowTable && state.table6">
        <view class="left">
          <view class="td">阶段</view>
          <view class="td">侦查阶段</view>
          <view class="td">审查起诉阶段</view>
          <view class="flex">
            <view class="left" style="display: flex; align-items: center; justify-content: center">审判阶段</view>
            <view class="flex1">
              <view class="td">基层法院审理</view>
              <view class="td">中级法院审理</view>
              <view class="td">高级法院审理</view>
              <view class="td">最高法院审理</view>
            </view>
          </view>
        </view>
        <view class="right">
          <view class="context-item">收费</view>
          <view class="context-item" v-for="(item, index) in state.contextList" :key="index">{{ item }}</view>
        </view>
      </view>
      <!-- table7 -->
      <view class="fixed-table" style="font-size: 20rpx" v-if="state.isShowTable && state.table7">
        <view class="left">
          <view class="flex">
            <view class="flex2">类型</view>
            <view class="flex2">阶段</view>
          </view>
          <view class="flex">
            <view class="left flex1" style="display: flex; align-items: center; justify-content: center">一般刑事犯罪案件</view>
            <view class="flex1">
              <view class="td">侦查阶段</view>
              <view class="td">审查起诉阶段</view>
              <view class="td">审判阶段</view>
            </view>
          </view>
          <view class="flex" style="border-top: 2rpx solid #fff">
            <view class="left flex1" style="display: flex; align-items: center; justify-content: center">经济类犯罪、共同犯罪案件</view>
            <view class="flex1">
              <view class="td">侦查阶段</view>
              <view class="td">审查起诉阶段</view>
              <view class="td">审判阶段</view>
            </view>
          </view>
        </view>
        <view class="right">
          <view class="context-item">收费</view>
          <view class="context-item" v-for="(item, index) in state.contextList" :key="index">{{ item }}</view>
        </view>
      </view>
      <!-- table8 -->
      <view class="fixed-table" style="font-size: 20rpx" v-if="state.isShowTable && state.table8">
        <view class="left">
          <view class="td">阶段</view>
          <view class="td">侦查阶段</view>
          <view class="td">审查起诉阶段</view>
          <view class="flex">
            <view class="left flex1" style="display: flex; align-items: center; justify-content: center">审判阶段</view>
            <view class="flex1">
              <view class="td">一审</view>
              <view class="td">二审</view>
              <view class="td">死刑复核阶段</view>
            </view>
          </view>
          <view class="td" style="border-top: 2rpx solid #fff">担任刑事自诉案件的原告或公诉案件被害人的代理人</view>
        </view>
        <view class="right">
          <view class="context-item">收费</view>
          <view class="context-item" v-for="(item, index) in state.contextList" :key="index">{{ item }}</view>
        </view>
      </view>
      <view class="context" v-if="state.isShowTableContext">{{ state.tableContext }}</view>
    </view>
    <view class="condition">
      <view class="cell">
        <text class="label">省份</text>
        <view class="value">
          <calculator-select v-model="state.province" :localdata="state.provinceRange" @change="provinceChange" :clear="false"></calculator-select>
        </view>
      </view>
      <view class="cell">
        <text class="label">类型</text>
        <view class="value">
          <calculator-select v-model="state.type" :localdata="state.typeRange" @change="typeChange" :clear="false"></calculator-select>
        </view>
      </view>
      <view class="cell" v-if="state.isShowModel">
        <text class="label">模式</text>
        <view class="value">
          <calculator-select v-model="state.model" :localdata="state.modelRange" @change="modelChange" :clear="false"></calculator-select>
        </view>
      </view>
      <view class="cell" v-if="state.isShowManner">
        <text class="label">方式</text>
        <view class="value">
          <calculator-select v-model="state.manner" :localdata="state.mannerRange" @change="mannerChange" :clear="false"></calculator-select>
        </view>
      </view>
      <view class="cell" v-if="state.isCount">
        <text class="label">涉及金额</text>
        <view class="amount">
          <view class="amount-input">
            <input type="digit" placeholder="请输入金额" v-model="state.amount" @input="inputAmount" :maxlength="state.moneyMaxLeng" class="input" />
          </view>
          <view class="unit">
            <calculator-select v-model="state.unit" :localdata="state.unitRange" @change="unitChange" :clear="false"></calculator-select>
          </view>
        </view>
      </view>
      <view class="calculate" @tap="calculate">计算</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  // @ts-nocheck
  import { reactive, onMounted, nextTick, defineEmits } from 'vue';
  import { getProvince, calculator, getType, getMode, getWay } from '@/api/attorneyfee';
  import calculatorSelect from '@/components/calculator-select/calculator-select.vue';

  const emit = defineEmits(['changeExplanation']);

  const state = reactive({
    province: '',
    provinceRange: [], // 省数据
    type: '', // 类型
    typeRange: [],
    model: '', // 模式
    modelRange: [],
    manner: 0, // 方式
    mannerRange: [],
    unit: 0,
    unitRange: [
      { id: 0, title: '元' },
      { id: 1, title: '万元' },
    ],
    amount: '',
    moneyMaxLeng: 8,
    result: {},
    isSiingle: false,
    isShowTable: false,
    isShowModel: false,
    isShowManner: false,
    isCount: false,
    contextList: [], // 固定模版
    dynamicContextList: [], // 动态表格数据
    table0: false,
    table1: false,
    table2: false,
    table3: false,
    table4: false,
    table5: false,
    table6: false,
    table7: false,
    table8: false,
    tableContext: '',
    isShowTableContext: false,
  });

  onMounted(async () => {
    const data = await getProvince();
    state.provinceRange = data;
  });

  function initData() {
    state.result = {};
    state.isSiingle = false;
    state.isShowTable = false;
  }

  function initTable() {
    state.table0 = false;
    state.table1 = false;
    state.table2 = false;
    state.table3 = false;
    state.table4 = false;
    state.table5 = false;
    state.table6 = false;
    state.table7 = false;
    state.table8 = false;
    state.tableContext = '';
    state.isShowTableContext = false;
  }

  // 改变省份
  async function provinceChange(e: any) {
    initData();
    state.isShowModel = false;
    state.isShowManner = false;
    state.isCount = false;
    state.type = '';
    state.typeRange = [];
    state.model = '';
    state.modelRange = [];
    state.manner = '';
    state.mannerRange = [];

    if (e) {
      const params = { provinceId: e };
      const data = await getType(params);
      state.typeRange = data;
    }
  }

  // 改变类型
  async function typeChange(e: any) {
    initData();
    state.isShowModel = false;
    state.isShowManner = false;
    state.isCount = false;
    state.model = '';
    state.modelRange = [];
    state.manner = '';
    state.mannerRange = [];

    if (e) {
      const params = { id: e, provinceId: state.province };
      const data = await getMode(params);
      if (data != null) {
        state.isShowModel = true;
        state.modelRange = data;
      }
    }
  }

  // 改变模式
  async function modelChange(e: any) {
    initData();
    state.isShowManner = false;
    state.isCount = false;
    state.manner = '';
    state.mannerRange = [];

    if (e) {
      const params = { id: e, provinceId: state.province };
      const data = await getWay(params);
      state.mannerRange = data;
      if (data != null) {
        state.isShowManner = true;
      }
    }

    state.modelRange.forEach((item) => {
      if (item.id == e) {
        state.isCount = item.isCount == 0 ? false : true;
      }
    });
  }

  // 改变方式
  function mannerChange(e: any) {
    initData();
    state.isCount = false;
    state.mannerRange.forEach((item) => {
      if (item.id == e) {
        state.isCount = item.isCount == 0 ? false : true;
      }
    });
  }

  function unitChange(e: any) {
    initData();
  }

  // 计算
  async function calculate() {
    // unit 0-元  1-万
    const { province, type, unit, amount, isCount } = state;

    if (!province) {
      return uni.showToast({
        title: '请选择省份',
        icon: 'none',
      });
    }

    if (!type) {
      return uni.showToast({
        title: '请选择类型',
        icon: 'none',
      });
    }

    if (isCount && !amount) {
      return uni.showToast({
        title: '请输入涉及金额',
        icon: 'none',
      });
    }

    const params = {
      id: type, // 类型id
      provinceId: province, // 省id
    };

    const data = await calculator(params);

    initTable();
    let arr = [];
    if (data.tableContext != null) {
      if (data.tableContext.tableDisplayType == 0 || data.tableContext.tableDisplayType == 1) {
        data.tableContext?.contextList.forEach((item) => {
          arr.push([item.split('=')[0], item.split('=')[1]]);
        });
        state.dynamicContextList = arr;
      } else {
        state.contextList = data.tableContext?.contextList;
      }
      state.isShowTable = true;
      state[`table${data.tableContext.tableDisplayType}`] = true;
      emit('changeExplanation', {
        isShowTable: true,
        explains: data.explains,
      });
    } else {
      state.isShowTableContext = true;
      state.tableContext = data.context;
    }

    if (data.midSum) {
      state.isSiingle = true;
    }
  }

  function inputAmount(e: any) {
    initData();
    nextTick(() => {
      let val = e.target.value.toString();
      val = val.replace(/[^\d.]/g, ''); // 清除"数字"和"."以外的字符
      val = val.replace(/\.{2,}/g, '.'); // 只保留第一个. 清除多余的
      val = val.replace(/^0+\./g, '0.');
      val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
      val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';

      if (val.includes('.')) {
        let numDian = val.toString().split('.')[1].length;
        if (numDian === 2) {
          state.moneyMaxLeng = val.length;
        }
      } else {
        state.moneyMaxLeng = 8;
      }
      state.amount = val;
    });
  }
</script>

<style lang="scss" scoped>
  .calculator {
    margin: 0 24rpx;
    padding: 20rpx;
    width: 702rpx;
    min-height: 656rpx;
    background: #bdd1fd;
    box-shadow: inset 8rpx 8rpx 8rpx 0rpx rgba(106, 136, 190, 0.1);
    border-radius: 20rpx;
    border: 2rpx solid rgba(81, 134, 208, 0.3);
    .display {
      min-height: 196rpx;
      background: #dfe9ff;
      padding: 16rpx;
      box-shadow: inset 4rpx 8rpx 8rpx 0rpx rgba(106, 136, 190, 0.2), inset -8rpx -8rpx 8rpx 0rpx rgba(255, 255, 255, 0.5);
      border-radius: 20rpx;
      border: 2rpx solid;
      border-image: linear-gradient(180deg, rgba(81, 134, 208, 0.1), rgba(91, 139, 250, 0.2)) 2 2;
      .table {
        width: 100%;
        height: 100%;
        color: #777;
        border: 2rpx solid #fff;
        .tr {
          display: flex;
          width: 100%;
          min-height: 80rpx;
          &:not(:last-child) {
            border-bottom: 2rpx solid #fff;
          }
          .td {
            width: 50%;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            &:not(:last-child) {
              border-right: 2rpx solid #fff;
            }
          }
        }
      }
      .fixed-table {
        display: flex;
        width: 100%;
        height: 100%;
        color: #777;
        border: 2rpx solid #fff;
        .left {
          flex: 1;
          text-align: center;
          border-right: 2rpx solid #fff;
          .td {
            height: 70rpx;
            padding: 0 4rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            &:not(:last-child) {
              border-bottom: 2rpx solid #fff;
            }
          }
          .flex {
            display: flex;
          }
          .flex1 {
            flex: 1;
          }
          .flex2 {
            flex: 1;
            height: 70rpx;
            line-height: 70rpx;
            border-bottom: 2rpx solid #fff;
            &:not(:last-child) {
              border-right: 2rpx solid #fff;
            }
          }
        }
        .right {
          .context-item {
            padding: 0 4rpx;
            text-align: center;
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            &:not(:last-child) {
              border-bottom: 2rpx solid #fff;
            }
          }
        }
      }
      .context {
        min-height: 196rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 56rpx;
        color: #eb6559;
        font-weight: 500;
      }
    }
    .condition {
      margin-top: 20rpx;
      min-height: 400rpx;
      padding: 20rpx;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 20rpx;
      .cell {
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        .label {
          width: 124rpx;
          padding: 0 8rpx;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 10rpx;
          border: 0rpx solid #f3f5f8;
          color: #5186d0;
          font-size: 26rpx;
          font-weight: 500;
          line-height: 80rpx;
          text-align-last: justify;
        }
        .value {
          width: 480rpx;
          height: 80rpx;
          background: #fff;
          border-radius: 10rpx;
          border: 0rpx solid #5186d0;
          :deep(.uni-select) {
            height: 80rpx !important;
            border: none;
            padding: 0 20rpx;
          }
        }
        .amount {
          width: 480rpx;
          display: flex;
          .amount-input {
            flex: 1;
            background-color: #fff;
            border-radius: 10rpx;
            margin-right: 20rpx;
            .input {
              display: flex;
              width: 100%;
              height: 80rpx;
              padding: 0 20rpx;
            }
          }
          .unit {
            background-color: #fff;
            width: 160rpx;
            border-radius: 10rpx;
          }
          :deep(.uni-select) {
            width: 160rpx;
            height: 80rpx !important;
            border: none;
            padding: 0 20rpx;
          }
        }
        &:not(:first-child) {
          margin-top: 20rpx;
        }
      }
      .calculate {
        margin-top: 20rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: #9db9fc;
        color: #fff;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(91, 139, 250, 0.1);
        border-radius: 10rpx;
      }
    }
  }
</style>
